<template>
  <div class="page light">
    <div class="page-main-no2">
      <div class="ksd-xqui-body">
        <div class="xquimini-content-page" style="height: calc(100% - 36px)">
          <div class="xquimini-container xquimini-page-anim">
            <div class="xquimini-main">
              <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px;clear: both">
                  <form action="" class="xqui-form xqui-form-pane">
                    <div class="xqui-form-item">
                      <div class="xqui-inline"><label class="xqui-form-label">关键词</label>
                        <div class="xqui-input-inline"><input autocomplete="off" class="xqui-input" type="text"
                                                              v-model.lazy.trim="conditionVal"></div>
                      </div>
                      <div class="xqui-inline">
                        <button @click.prevent="findUserList" class="xqui-btn xqui-btn-primary"
                                lay-filter="data-search-btn" lay-submit="" type="submit">搜 索
                        </button>
                        <router-link to="/book/add">
                          <button class="xqui-btn xqui-btn-primary"
                                  lay-filter="data-search-btn" lay-submit="" type="submit">添 加
                          </button>
                        </router-link>
                      </div>
                      <div style="float: right;font-weight: bold ;font-size: 12px;position: relative;top:10px;">
                        一共有{{ total || 0 }}位同学加入了我们!
                      </div>
                    </div>
                  </form>
                </div>
              </fieldset>
              <div class="xqui-form xqui-border-box xqui-table-view" lay-filter="LAY-table-1" lay-id="currentTableId"
                   style=" ">
                <div class="xqui-table-box">
                  <div class="xqui-table-header">
                    <table border="0" cellpadding="0" cellspacing="0" class="xqui-table" lay-skin="line">
                      <thead>
                      <tr>
                        <th class=" xqui-table-col-special" data-field="0" data-key="1-0-0" data-unresize="true">
                          <div class="xqui-table-cell laytable-cell-checkbox"></div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>学号</span></div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>头像</span></div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>昵称</span></div>
                        </th>
                        <th class="" data-field="username" data-key="1-0-2">
                          <div class="xqui-table-cell"><span>性别</span></div>
                        </th>

                        <th class=" xqui-table-col-special" data-field="10" data-key="1-0-10" data-minwidth="150">
                          <div align="center" class="xqui-table-cell"><span>操作</span></div>
                        </th>
                      </tr>
                      </thead>
                      <tbody>
                      <template :key="user.id" class="" data-index="0" v-for="(user , index) in items">
                        <tr @click="expandChild(index)">
                          <td class="xqui-table-col-special" data-field="0" data-key="1-0-0" style="width: 40px;">
                            <div class="xqui-table-cell laytable-cell-checkbox">
                              <span v-if="user.children.length > 0"><i :class="['iconfont','iconfont',user.expand?'icon-zhankai1':'icon-zhankai']"></i></span>
                            </div>
                          </td>
                          <td class="" data-field="id" data-key="1-0-1">
                            <div class="xqui-table-cell">
                              {{ user.code }}
                            </div>
                          </td>
                          <td class="" data-field="username" data-key="1-0-2">
                            <div class="xqui-table-cell">{{ user.name }}</div>
                          </td>
                          <td class="" data-field="sex" data-key="1-0-3">
                            <div class="xqui-table-cell">{{ user.nickname }}</div>
                          </td>
                          <td class="" data-field="city" data-key="1-0-4">
                            <div class="xqui-table-cell">{{ user.sex }}</div>
                          </td>
                          <td data-field="10" data-key="1-0-10" align="center" data-off="true" data-minwidth="150"
                              class="xqui-table-col-special">
                            <div class="xqui-table-cell">
                              <a @click.prevent="updatePassword(index)"
                                 class="xqui-btn xqui-btn-normal xqui-btn-xs data-count-edit" lay-event="edit"><i
                                class="iconfont icon-fenfaneirong"></i>重置默认</a>
                              <a @click.prevent="editorUser(index)"
                                 class="xqui-btn xqui-btn-normal xqui-btn-xs data-count-edit" lay-event="edit"><i
                                class="iconfont icon-bianji"></i>编辑</a>
                              <a @click.prevent="deleteUser(index)"
                                 class="xqui-btn xqui-btn-xs xqui-btn-danger data-count-delete" lay-event="delete"><i
                                class="iconfont icon-remove2"></i>删除</a>
                            </div>
                          </td>
                        </tr>
                        <template v-for="(child,cindex) in user.children" :key="cindex">
                          <tr v-show="child.expand"  style="background: #f8f8f8;">
                            <td class="xqui-table-col-special" data-field="0" data-key="1-0-0">

                            </td>
                            <td class="" data-field="id" data-key="1-0-1">
                              <div class="xqui-table-cell">{{ user.code }}</div>
                            </td>
                            <td class="" data-field="username" data-key="1-0-2">
                              <div class="xqui-table-cell">{{ user.name }}</div>
                            </td>
                            <td class="" data-field="sex" data-key="1-0-3">
                              <div class="xqui-table-cell">{{ user.nickname }}</div>
                            </td>
                            <td class="" data-field="city" data-key="1-0-4">
                              <div class="xqui-table-cell">{{ user.sex }}</div>
                            </td>
                            <td data-field="10" data-key="1-0-10" align="center" data-off="true" data-minwidth="150"
                                class="xqui-table-col-special">
                              <div class="xqui-table-cell">
                                <a @click.prevent="updatePassword(index)"
                                   class="xqui-btn xqui-btn-normal xqui-btn-xs data-count-edit" lay-event="edit"><i
                                  class="iconfont icon-fenfaneirong"></i>重置默认</a>
                                <a @click.prevent="editorUser(index)"
                                   class="xqui-btn xqui-btn-normal xqui-btn-xs data-count-edit" lay-event="edit"><i
                                  class="iconfont icon-bianji"></i>编辑</a>
                                <a @click.prevent="deleteUser(index)"
                                   class="xqui-btn xqui-btn-xs xqui-btn-danger data-count-delete" lay-event="delete"><i
                                  class="iconfont icon-remove2"></i>删除</a>
                              </div>
                            </td>
                          </tr>
                        </template>
                      </template>
                      </tbody>
                      <tfoot>
                      <tr>
                        <td colspan="20">
                          <div class="text-center ksd-empty" v-if="total == 0 && showtype == 3">
                            <p><img src="~@/assets/img/nodata.png" style="display: inline;width: 200px" alt=""></p>
                            <p class="mt20"><span>暂无数据</span></p>
                          </div>
                        </td>
                      </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
                <div class="xqui-table-page">
                  <pug-page
                    :page-index="currentPage"
                    :total="count"
                    :page-size="pageSize"
                    @change="pageChange">
                  </pug-page>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import PugPage from '@/components/page/PugPage'

export default {
  name: "Course.vue",
  components: {
    PugPage
  },
  data() {
    return {
      pageSize: 20, //每页显示20条数据
      currentPage: 1, //当前页码
      count: 100, //总记录数
      items: [
        {
          code: 1,
          name: " 编程到底该如何学习？",
          nickname: "xxxxx",
          sex: 1,
          children: [{expand: false}, {expand: false}, {expand: false}]
        },
        {code: 2, name: "学习编程之前你要了解的知识！", nickname: "xxxxx", sex: 1,expand:false, children: [{expand: false}]},
        {code: 3, name: "工欲善其事，必先利其器！", nickname: "xxxxx", sex: 1, expand:false,children: [{expand: false}]},
        {code: 4, name: "基础决定你未来的高度！", nickname: "xxxxx", sex: 1, expand:false,children: [{expand: false}]},
        {code: 5, name: "程序的本质就是这些！", nickname: "xxxxx", sex: 1, expand:false,children: []},
        {code: 6, name: "利用集合高效解决问题！", nickname: "xxxxx", sex: 1, expand:false,children: []},
        {code: 7, name: "从零开始开发游戏！", nickname: "xxxxx", sex: 1, expand:false,children: []},
        {code: 8, name: "日常开发必备知识！", nickname: "xxxxx", sex: 1, expand:false,children: [{expand: false}]},
        {code: 9, name: "最简单的数据结构！", nickname: "xxxxx", sex: 1,expand:false, children: []},
        {code: 10, name: "Java进阶必会技能！", nickname: "xxxxx", sex: 1, expand:false,children: []},
      ]
    }
  },
  methods: {
    //获取数据
    getList() {

    },

    //从page组件传递过来的当前page
    pageChange(page) {
      this.currentPage = page
    },

    expandChild(index){
      this.items[index].expand = !this.items[index].expand;
      this.items[index].children.map(c=>c.expand = this.items[index].expand);
    }
  },
  mounted() {
    //请求第一页数据
    this.getList()
  }
}
</script>

<style scoped>


</style>
